// 所有和权限控制相关的事儿
import router from './router'
import { getToken } from './utils/auth'
import store from './store'
import { asyncRouter } from '@/router/asyncRoutes'

const WHILTE_LIST = ['/login', '/404'] // 白名单

// 处理1级路由权限数据
function handleFirstLevelRouter(permsissionData) {
  const newArr = permsissionData.map(item => {
    return item.split(':')[0]
  })
  return [...new Set(newArr)]
}

// 处理2级路由权限数据
function handleSecondLevelRouter(permsissionData) {
  const newArr = permsissionData.map(item => {
    const array = item.split(':')
    return `${array[0]}:${array[1]}`
  })
  return [...new Set(newArr)]
}

// 根据权限标识 过滤路由表
function getRoutes(firstLevelRouter, secondLevelRouter, asyncRouter) {

  // 判断是否是否管理员
  if (firstLevelRouter.includes('*')) {
    // 管理员
    return asyncRouter
  }

  // 根据一二级 对动态路由表 做过滤, return 出去过滤之后的路由表
  // 1. 根据1级路由对 动态路由表做过滤
  return asyncRouter.filter(route => {
    return firstLevelRouter.includes(route.permission)
  }).map(item => {
    // 对2级 路由做过滤
    return {
      ...item,
      children: item.children.filter(item => secondLevelRouter.includes(item.permission))
    }
  })
  // 2. 根据2级路由对 动态路由表做过滤
}

// 1. 路由前置守卫
router.beforeEach(async(to, from, next) => {
  // to:  目标路由对象   到哪里去
  // from: 路由对象  从哪里来的那个对象
  // next:  是一个函数  调用这个函数  就表示放行
  // console.log('router.beforeEach', from, to)
  // const token = localStorage.getItem('token')
  const token = getToken()
  if (token) {
    // 有token
    next()
    // 只有从来没有获取过权限数据 才执行后面的逻辑 strore.state.user.userProfile.id
    if (!store.state.user.userProfile.id) {
      // 1. 调用action 函数获取用户的权限数据
      const res = await store.dispatch('user/asyncGetUserRolePerms')
      // console.log('================ 当前的权限数据为: ', res)
      // 2. 把后端的权限数组格式化成我们自己的两个权限数据
      const firstLevelRouter = handleFirstLevelRouter(res)
      const secondLevelRouter = handleSecondLevelRouter(res)
      // console.log('= 一级路由权限数据为: ', firstLevelRouter)
      // console.log('= 二级路由权限数据为: ', secondLevelRouter)
      // 2. 根据权限数据动态添加路由
      // 3. 根据权限标识 过滤筛选 动态路由表  最总得到有资格显示到左侧的所有路由表
      const routes = getRoutes(firstLevelRouter, secondLevelRouter, asyncRouter)
      // console.log('= 过滤后的路由表为: ', routes)
      // 4. 动态添加路由
      // 把动态路由表加入到 路由系统中,(当浏览器中访问路由的路径, 显示渲染出来对应的组件)
      routes.forEach(item => {
        router.addRoute(item)
      })
      // 5. 调用mutation 函数 把路由表数据 保存到 Vuex 中
      store.commit('menu/setMenuList', routes)
    }
  } else {
    // 没有token
    // 是否在白名单内, 是否在数组中找到 -path  -  to.path
    if (WHILTE_LIST.includes(to.path)) {
      // 在白名单内
      next()
    } else {
      // 不在白名单内
      next('/login')
    }
  }
})
